<template>
	<view>
		<view class="smal-item-delivery-info comm-container">
			<view class="box">
				<view class="title">
					<text>选择车型</text>
				</view>
				<view class="tab-list">
					<view class="tab-item" v-for="(item,index) in tabList" :key="index" @click="active = item.id" :class="active == item.id ? 'active': ''">
						<text>{{  item.name }}</text>
					</view>
				</view>
				<view class="swiper-container">
					<swiper class="swiper" circular :current="currentIndex" @change="handleSwiperChange">
						<block v-for="(item, index) in swiperList" :key="index">
							<swiper-item>
								<image src="../../subpages/static/images/image-07.png" mode="widthFix" class="img"></image>
								<view class="info-content">
									<view class="info-item">
										<text class="name">厢长</text>
										<text class="content">1.4~1.7米</text>
									</view>
									<view class="info-item">
										<text class="name">载重</text>
										<text class="content">0.3~0.5吨</text>
									</view>
									<view class="info-item">
										<text class="name">载方</text>
										<text class="content">1.7~2.4方</text>
									</view>
								</view>
							</swiper-item>
						</block>
					</swiper>
					<view class="arrow arrow-left" @tap="swiperPrev">
						<uni-icons  type="left" size="32"></uni-icons>
					</view>
					<view class="arrow arrow-right" @tap="swiperNext">
						<uni-icons  type="right" size="32"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="header-delivery">
			<view class="item">
				<view class="inp val">
					<view class="left">
						<image src="/subpages/static/images/icon-02.png" class="icon" mode="widthFix" />
					</view>
					<view class="right">
						<text class="name">王小明</text>
						<text class="tel">18697521665</text>
						<text class="content">山东省济南市历城区馨馨花园</text>
					</view>
				</view>
				<view class="btn" style="border-left: 1px solid #D3D3D3;padding-left: 20rpx;" @click="nextLink('/subpages/views/address/list')">地址薄</view>
			</view>
			<view class="item">
				<view class="inp val">
					<view class="left">
						<image src="/subpages/static/images/icon-03.png" class="icon" mode="widthFix" />
					</view>
					<view class="right">
						<text class="name">王小明</text>
						<text class="tel">18697521665</text>
						<text class="content">山东省济南市历城区馨馨花园</text>
					</view>
				</view>
				<view class="btn" style="border-left: 1px solid #D3D3D3;padding-left: 20rpx;" @click="nextLink('/subpages/views/address/list')">地址薄</view>
			</view>
		</view>
		<view class="card-wraper card-list">
			<view class="card-item">
				<view class="name">付款方式</view>
				<view class="val">
					<view class="btn">
						<u-button
						  @click="isShow = true"
						  type="success"
						  shape="circle"
						  text="绑定账号"
						  style="width: 160rpx;height: 45rpx;"
						  color="#2979FF"
						></u-button>
					</view>
					<view class="text">
						<text class="text-val">寄付月结</text>
						<uni-icons  type="right" size="20"></uni-icons>
					</view>
				</view>
			</view>
			<view class="card-item" @click="openTimer">
				<view class="name">上门时间</view>
				<view class="val">
					<view class="text">
						<text class="text-val">请选择</text>
						<uni-icons  type="right" size="20"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 300rpx;"></view>
		<view class="footer-btn">
			<view class="comm-container">
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<view class="left">
						<text>预估</text><text class="num">￥30</text>
					</view>
					<view class="right">
						<u-button
						  type="success"
						  shape="circle"
						  text="立即下单"
						  style="width: 300rpx;height: 60rpx;"
						  color="#2979FF"
						></u-button>
					</view>
				</view>
			</view>
		</view>
		<ctimer ref="cTimer" />
		<u-popup :show="isShow" :round="10" bgColor="#eee" mode="bottom" @close="close">
			<view class="popupInp">
				<view class="title">
					<text>绑定账号</text>
					<uni-icons @click="close" type="closeempty" size="24"></uni-icons>
				</view>
				<view class="inp">
					<input placeholder="请输入账号" />
				</view>
				<u-button
				  type="success"
				  shape="circle"
				  text="立即绑定"
				  style="width: 80%;height: 60rpx;"
				  color="#2979FF"
				></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import ctimer from "../components/timer.vue"
	export default {
		components: {
			ctimer
		},
		data() {
			return {
				subscribeTime:{time:"选择时间",active:true},
				isShow: false,
				nowWeek:'',
				time:'',
				active: 0,
				currentIndex: 0,
				checked: false,
				tabList: [{
					id: 0,
					name: "小货"
				},{
					id: 1,
					name: "3米8"
				},{
					id: 2,
					name: "中平板"
				},{
					id: 3,
					name: "中箱货"
				},{
					id: 4,
					name: "5米2"
				},{
					id: 5,
					name: "6米8"
				},{
					id: 6,
					name: "7米6"
				},{
					id: 7,
					name: "8米6"
				}],
				swiperList: [{
					id: 0,
					image: "../../subpages/static/images/image-07.png"
				},{
					id: 0,
					image: "../../subpages/static/images/image-07.png"
				}],
				deliveryList: [{
					id: 0,
					name: "德邦快递"
				},{
					id: 1,
					name: "顺丰快递"
				},{
					id: 2,
					name: "联通快递"
				},{
					id: 3,
					name: "韵达快递"
				}]
			}
		},
		methods: {
			handleSwiperChange(event) {
				const current = event.detail.current;
				this.currentIndex = current;
			},
			nextLink(path) {
				uni.navigateTo({
						url: path
				})
			},
			swiperPrev() {
				if(this.currentIndex <= 0) {
					return
				}
				this.currentIndex = (this.currentIndex - 1 + this.swiperList.length) % this.swiperList.length;
			},
			swiperNext() {
				if(this.currentIndex == this.swiperList.length - 1) {
					return
				}
				this.currentIndex = (this.currentIndex + 1) % this.swiperList.length;
			},
			openTimer() {
				this.$refs.cTimer.open()
			},
			close() {
				this.isShow = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header-delivery {
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0,0,0,0.16);
		border-radius: 20rpx;
		.item {
			display: flex;
			justify-content: space-between;
			padding: {
				top: 40rpx;
				bottom: 40rpx;
			};
			margin: 0 20rpx;
			align-items: center;
			&:nth-child(1) {
				border-bottom: 1px solid #D3D3D3;
			}
			.val {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.tel {
					margin-left: 20rpx;
				}
				.content {
					margin-left: 20rpx;
					display: block;
				}
			}
			&.status {
				background: #FFF8F2;
				border: 3rpx solid #FF7000;
				border-radius: 20rpx;
			}
			.icon {
				width: 45rpx;
				height: 45rpx;
				vertical-align: middle;
			}
			.name {
				font-size: 32rpx;
				margin-left: 20rpx;
			}
		}
	}
	.smal-item-delivery-info {
		.box {
			background: linear-gradient( 180deg, #FFFFFF 0%, #F1F2F4 100%);
			box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0,0,0,0.16);
			padding: 30rpx 20rpx;
			border-radius: 20rpx;
			.title {
				font-size: 30rpx;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #D3D3D3;
			}
			.tab-list {
				padding-top: 20rpx;
				.tab-item {
					font-size: 28rpx;
					margin-right: 25rpx;
					display: inline-block;
					line-height: 60rpx;
					&.active {
						color: #2979FF;
					}
				}
			}
		}
	}
	.swiper-container {
		position: relative;
		.swiper {
			width: 600rpx;
			margin: auto;
			height: 500rpx;
			.info-content {
				display: flex;
				justify-content: space-between;
				.name {
					color: #989898;
					font-size: 26rpx;
					margin-bottom: 20rpx;
					display: block;
				}
				.content {
					color: #222222;
					font-size: 26rpx;
				}
			}
		}
	}
	.arrow {
			position: absolute;
			top: 30%;
			width: 30px;
			height: 30px;
			opacity: 0.6;
		}
	
		.arrow-left {
			left: 0;
		}
	
		.arrow-right {
			right: 0;
		}
		.card-list {
			.card-item {
				display: flex;
				justify-content: space-between;
				padding: 30rpx 0;
				.val {
					display: flex;
					align-items: center;
					.text-val {
						margin-left: 20rpx;
					}
				}
			}
		}
		.scrollview-box {
			white-space: nowrap;
			width: 100%;
		}
		.delivery-list {
			margin-top: 35rpx;
			.delivery-item {
				border: 2rpx solid #2979FF;
				display: inline-flex;
				padding: 20rpx;
				border-radius: 20rpx;
				width: 270rpx;
				margin-right: 20rpx;
				justify-content: space-between;
				align-items: center;
				.img {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					background: red;
				}
				.text {
					text {
						display: block;
					}
				}
			}
		}
		.footer-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #fff;
			padding-bottom: 30rpx;
			.left {
				font-size: 36rpx;
				.num {
					color: red;
				}
			}
		}
		.popupInp {
			padding: 30rpx 30rpx 100rpx 30rpx;
			.title {
				display: flex;
				justify-content: space-between;
				margin-bottom: 40rpx;
				font-size: 36rpx;
				align-items: center;
			}
			.inp { 
				margin-bottom: 40rpx;
				border-bottom: 1px solid #ccc;
				padding-bottom: 10rpx;
			}
		}
</style>